<template lang="pug">
.user-manage.app-container
  .public-search-wrap
    el-form(:inline="true" class="demo-form-inline")
      el-form-item(label="状态:")
        el-select(v-model="state.listQuery.status" filterable clearable placeholder='状态' @change="searchFun")
          el-option(:value="-1" label="全部")
          el-option(:value="1" label="正常")
          el-option(:value="0" label="禁用")
      el-form-item
        el-button(type="primary" size="small" icon="el-icon-plus" @click="addFun") 添加

  .table-main
    el-table(:data="state.listData" border v-loading="tableLoading")
      el-table-column(label="序号" prop="id" align="center" width="70")
      el-table-column(label="名称" align="center" prop="name" min-width="120")
      el-table-column(label="截止日期" align="center" prop="deadline" min-width="120")
      el-table-column(label="内容" prop="content" align="center" min-width="120")
      el-table-column(label="状态" align="center" min-width="120")
        template(#default="{row}")
          el-switch(v-model="row.status" :active-value="1" :inactive-value="0" @click="switchStatus(row)")
      el-table-column(label="操作" width="190" align="center")
        template(#default="scope")
          el-button(size="mini" type="default" @click="handleEdit(scope.row)") 修改
          el-button(size="mini" type="danger" @click="handleDel(scope.row)") 删除
  .pagination-wrap
    .page-text 总数：{{ state.total }}条
    .pagination
      el-pagination(background layout="prev, pager, next" :total="state.total" :current-page="state.listQuery.page" :page-size="10" @current-change="handleCurrentChange")
</template>

<script setup>
import { getAct, getJavaAct, createAct, updateAct, update_status, delAct } from '@/api/act'
import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() // 内部组件实例
// 数据
const state = reactive({
  listQuery: {
    status: -1,
    page: 1
  },
  total: 0,
  listData: [], // 列表数据
  defaultData: {}
})
const tableLoading = ref(false)
const addShow = ref(false)
const editShow = ref(false)
const roleShow = ref(false)

queryFun()

/** 搜索逻辑开始 */
function queryFun () {
  getList()
}
function handleCurrentChange (val) { searchRouter(val) }
function searchFun () { searchRouter(1) }
function searchRouter (val) {
  state.listQuery.page = val
  getList()
}
/** 搜索逻辑结束 */

// 获取列表
async function getList () {
  getJavaAct().then(res => {
    console.log(res)
  })
  const data = await getAct(state.listQuery)
  state.listData = data.rows
  console.log(data.count)
  state.total = data.count
}

// 编辑
function handleEdit (row) {
  const obj = {
      "id": row.id,
      "name": "修改",
      "deadline": new Date().getTime(),
      "content": "度假"
  }
  updateAct(obj).then(res => {
    proxy.$message.success('修改成功')
    getList()
  })
}

// 选择角色
function handleRole () {
  roleShow.value = true
}

function addFun() {
  const obj = {
      "name": "射箭",
      "deadline": new Date().getTime(),
      "content": "度假"
  }
  createAct(obj).then(res => {
    proxy.$message.success('添加成功')
    getList()
  })
}

function switchStatus(row) {
    const obj = {
      status: row.status,
      id: row.id
    }
    update_status(obj).then(res => {
      proxy.$message({ type: 'success', message: '切换成功' })
    })
}
// 删除列表
function handleDel (row) {
  proxy.$confirm('确定删除？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const obj = {
      id: row.id
    }
    delAct(obj).then(res => {
      proxy.$message({ type: 'success', message: '删除成功' })
      getList()
    })
  })
}

// 关闭弹窗
function handleColse (val) {
  console.log('close')
}
</script>

<style lang="scss">
</style>
